'use client'
import { Button, Space } from 'antd';

import { fromJson, toJson } from '@/pao/index';
import { createReactDataModel, defComponent, ReactDataModel, ReactDataModelHook } from '@/pao/web';
import {
	ActionCreateObjectByClick, ActionCreatePointsByClick, DoubleLegsRulerDataModel, RulerDataModel,
	SvgEditableCanvasDataModel, SvgLineCreateButton,
	SvgPointCreaterButton, SvgEditPointDataModel,
	SvgPointsShapeDataModel, SvgPolygonCreateButton,
	SvgPolylineCreateButton
} from '@/pao/web/svg/editor';
import { SvgLevelTabDataModel } from '@/pao/web/svg/editor/svgEditorLevels';
import { css } from '@emotion/css';

class PageGeometryDataModel extends ReactDataModel {
	rulerWidth = 700;
	rulerHeight = 60;
	canvas: SvgEditableCanvasDataModel;
	undoButton: ReactDataModelHook<{undoSize: number}>;
	redoButton: ReactDataModelHook<{redoSize: number}>;
	tabDataModel: SvgLevelTabDataModel;

	addRuler(props: Partial<RulerDataModel> = {}) {
		this.canvas.startAction(new ActionCreateObjectByClick(this.canvas.toolsLevel, RulerDataModel, {
			positiveWidth: this.rulerWidth,
			height: this.rulerHeight,
			x: 150,
			y: 50,
			borderRadius: 10,
			...props
		}, false, true, false));
	}

	addDoubleRuler(props: Partial<DoubleLegsRulerDataModel> = {}) {
		this.canvas.startAction(new ActionCreateObjectByClick(this.canvas.toolsLevel, DoubleLegsRulerDataModel, {
			positiveWidth: this.rulerWidth,
			height: this.rulerHeight,
			x: 150,
			y: 250,
			borderRadius: 10,
			angleOfRules: 0,
			...props
		}, false, true, false));
	}

	addNewPoint(props: Partial<SvgEditPointDataModel> = {}) {
		const action = new ActionCreateObjectByClick(this.canvas.currentLevel, SvgEditPointDataModel, props);
		this.canvas.startAction(action);
	}

	addPoints(nodeType: typeof SvgPointsShapeDataModel,props: Partial<InstanceType<typeof nodeType>> = {}) {
		const action = new ActionCreatePointsByClick(this.canvas.currentLevel, nodeType, props);
		this.canvas.startAction(action);
	}
	constructor() {
		super();
		this.canvas = new SvgEditableCanvasDataModel();
		this.tabDataModel = new SvgLevelTabDataModel(this.canvas);
		this.undoButton = createReactDataModel<{undoSize: number}>(props=>{
			return <Button onClick={() => {this.canvas.undo()}} disabled={props.undoSize <= 0}>撤销</Button>
		}, {undoSize: 0});
		this.redoButton = createReactDataModel<{redoSize: number}>(props=>{
			return <Button onClick={() => {this.canvas.redo()}} disabled={props.redoSize <= 0}>重做</Button>
		}, {redoSize: 0});

		this.canvas.setProps({
			svgStyle: {
				className: css`flex: auto;`,
				cursor: 'crosshair'
			},
			onDataModified: (dataModifyType)=> {
				this.undoButton!.setProps({undoSize: this.canvas.undoSize}, true);
				this.redoButton!.setProps({redoSize: this.canvas.redoSize}, true);
			}
		})
	}
  render() {
		return 	<div className={css`flex: auto; display: flex;flex-direction: column;`}>
			<Space direction="horizontal" className={css`width: 100%; height: 50px; padding: 5px; background-color: #f0f2f5;`}>
				<Button onClick={() => this.canvas.stopAction()}>选择</Button>
				<Button onClick={() => this.addRuler()}>添加直尺</Button>
				<Button onClick={() => this.addDoubleRuler()}>添加两脚尺</Button>
				<SvgPointCreaterButton canvas={this.canvas}/>
				<SvgLineCreateButton canvas={this.canvas}/>
				<SvgPolylineCreateButton canvas={this.canvas}/>
				<SvgPolygonCreateButton canvas={this.canvas}/>
				<Button onClick={() => {
					const json = toJson(this.canvas);
					console.log(json);
					console.log(fromJson(json))
					alert(json);
				}}>保存</Button>
				{this.undoButton.render()}
				{this.redoButton.render()}
			</Space>
			<div className={css`flex: auto; display: flex;flex-direction: row;overflow: hidden;`	}>
				{this.tabDataModel.render()}
				{this.canvas.render()}
			</div>
    </div>
	}
}
const PageGeometry = defComponent(PageGeometryDataModel)
const Page = () => {
	return <PageGeometry/>
};
export default Page;